<template>
  <div class="client-history-overlay" @click="handleOverlayClick">
    <div class="client-history" @click.stop>
      <div class="history-header">
        <h3>{{ client?.name }} 的历史记录</h3>
        <button @click="$emit('close')" class="close-btn">×</button>
      </div>

      <div class="history-content">
        <div v-if="loading" class="loading-state">
          <div class="loading-spinner"></div>
          <p>加载历史记录...</p>
        </div>

        <div v-else-if="historyList.length === 0" class="empty-state">
          <div class="empty-icon">📋</div>
          <p>暂无历史记录</p>
        </div>

        <div v-else class="history-list">
          <div
            v-for="record in historyList"
            :key="record.id"
            class="history-item"
            @click="selectRecord(record)"
            :class="{ active: selectedRecord?.id === record.id }"
          >
            <div class="record-header">
              <span class="record-date">{{ formatDate(record.date) }}</span>
              <span class="record-summary">{{ record.summary }}</span>
            </div>
            <div class="record-meta">
              <span class="message-count">{{ record.messages.length }} 条消息</span>
            </div>
          </div>
        </div>
      </div>

      <div v-if="selectedRecord" class="record-details">
        <div class="details-header">
          <h4>{{ formatDate(selectedRecord.date) }} - {{ selectedRecord.summary }}</h4>
        </div>
        <div class="messages-list">
          <div
            v-for="message in selectedRecord.messages"
            :key="message.id"
            class="message-item"
            :class="{ 'own-message': isOwnMessage(message) }"
          >
            <div class="message-content">
              <div class="message-text">{{ message.content }}</div>
              <div class="message-time">{{ formatTime(message.timestamp) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template><script 
setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import type { ClientData, ChatHistory, Message } from '@/types'
import { formatTimestamp } from '@/utils'
import { useUserStore } from '@/stores/user'

interface Props {
  client: ClientData | null
}

const props = defineProps<Props>()

const emit = defineEmits<{
  close: []
}>()

const userStore = useUserStore()
const loading = ref(false)
const selectedRecord = ref<ChatHistory | null>(null)

const currentUser = computed(() => userStore.currentUser)

const historyList = computed(() => {
  return props.client?.history || []
})

const isOwnMessage = (message: Message): boolean => {
  return message.senderId === currentUser.value?.id
}

const formatDate = (date: Date): string => {
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const formatTime = (timestamp: Date): string => {
  return timestamp.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

const selectRecord = (record: ChatHistory) => {
  selectedRecord.value = record
}

const handleOverlayClick = () => {
  emit('close')
}

onMounted(() => {
  if (historyList.value.length > 0) {
    selectedRecord.value = historyList.value[0]
  }
})
</script>

<style scoped>
.client-history-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.client-history {
  background: var(--color-surface);
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--color-border);
}

.history-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--color-text);
}

.close-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.2s;
}

.close-btn:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.history-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.loading-state,
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--color-text-secondary);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.empty-icon {
  font-size: 48px;
  opacity: 0.5;
}

.history-list {
  width: 300px;
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
}

.history-item {
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background-color 0.2s;
}

.history-item:hover {
  background: var(--color-hover);
}

.history-item.active {
  background: var(--color-primary-light);
  border-right: 3px solid var(--color-primary);
}

.record-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.record-date {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.record-summary {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
}

.record-meta {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.record-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.details-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
}

.details-header h4 {
  margin: 0;
  font-size: 16px;
  color: var(--color-text);
}

.messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.message-item {
  display: flex;
  margin-bottom: 12px;
}

.message-item.own-message {
  justify-content: flex-end;
}

.message-content {
  max-width: 70%;
  background: var(--color-background);
  border-radius: 8px;
  padding: 8px 12px;
}

.own-message .message-content {
  background: var(--color-primary-light);
}

.message-text {
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 4px;
}

.message-time {
  font-size: 11px;
  color: var(--color-text-secondary);
  text-align: right;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>